<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>${"${articleTitle!}-政府采购信息网"}</title>
    <#if articleInfo?length gt 1>
        <meta name="description" content="${articleInfo!}">
    <#else>
        <meta name="description" content="${articleTitle!}">
    </#if>
    <meta name="keywords" content="${keywords!}">
    <link rel="icon" href="/web/img/favicon.ico">
    <link rel="shortcut icon" href="/web/img/favicon.ico">

    <link rel="stylesheet/less" href="/web/public/public.less">
    <link rel="stylesheet/less" href="/web/css/article.less">
    <link rel="stylesheet" href="/web/css/pgwslideshow.css">

    <script src="/web/lib/jquery-1.12.4.min.js"></script>
    <script src="/web/lib/jquery.qrcode.min.js"></script>
    <script src="/web/lib/pgwslideshow.js"></script>
    <script src="/web/public/public.js"></script>
    <script src="https://pv.sohu.com/cityjson?ie=utf-8"></script>

    <link rel="stylesheet" href="/web/css/audio.css">
    <link rel="stylesheet" href="https://at.alicdn.com/t/font_2103922_29dsi13humk.css">
    <link rel="stylesheet" type="text/css" href="https://www.jq22.com/jquery/font-awesome.4.6.0.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
    <script src="/web/lib/audio.js"></script>

    <!-- body -->
    <script>
        function closeSimpleView() {
            $('body').removeClass('simple-view');
        }
    </script>
    <script>
        $(function () {
            var myOnChange = function (currentSlide) {
                $("div[name^='id_text_box']").each(function (i) {
                    if (i == (currentSlide - 1)) {
                        $(this).show();
                    } else {
                        $(this).hide();
                    }
                });
            }
            $('.pgwSlideshow').pgwSlideshow({
                autoSlide: false,
                myOnChange: myOnChange,
            });
        })
    </script>
    <!-- content -->
    <style type="text/less">
        @import "/web/public/public.less";
        .position{
            font-size: 14px;
            letter-spacing: 0px;
            color: #7f7f7f;
            margin-left: 5px;
        }
        #main-content {
            .source {
                font-size: 14px;
                color: #a8a8a8;
                padding-top: 25px;
                .website {
                    color: #7f7f7f;
                }
            }
            hr {
                border-color: #EEEEEE;
                margin-top: 10px;
                margin-bottom: 52px;
            }
            .content-wrap {
                .swiper-box {
                    display: flex;
                    .swiper-box-left {
                        margin-right: 33px;
                        position: absolute;//20201112
                        img {
                            width: 57px;
                            height: 459px;
                        }
                    }
                    .swiper-box-banner {
                        .pgwSlideshow {
                            width: 590px;//20201103
                            background: #fff;
                            margin-left: 90px;//20201112
                            .ps-caption {
                                visibility: hidden;
                            }
                            .ps-list {
                                margin-top: 15px;
                                border-top: 1px solid #eeeeee;
                                border-bottom: 1px solid #eeeeee;
                                box-shadow: 0 0px 0px -5px #333 inset;
                                background: #fff;
                                overflow: hidden;
                                position: relative;
                                li {
                                    .ps-item {
                                        opacity: 1.0;
                                        filter: alpha(opacity=100);
                                    }
                                    img {
                                        display: block;
                                        border: 0px solid #777;
                                        width: 120px;
                                        height: 74px;
                                        background-color: #eeeeee;
                                        object-fit: contain;
                                    }
                                    .ps-item.ps-selected {
                                        float: left;
                                        opacity: 1;
                                        overflow: hidden;
                                        border: solid 3px #e60012;
                                    }
                                }
                                .ps-prev {
                                    height: 100%;
                                    width: 40px;
                                    background: rgba(255, 255, 255, 1.0);
                                    border: 0px solid #777;
                                    padding: 40px 0px 0px 8px;
                                    top: 0px;
                                    z-index: 98;//20201207
                                    .ps-prevIcon {
                                        width: 25px;
                                        height: 25px;
                                        border: solid rgba(0, 0, 0, 0.5);
                                        border-width: 0 3px 3px 0;
                                        display: inline-block;
                                        transform: rotate(135deg);
                                        -webkit-transform: rotate(135deg);
                                    }
                                }
                                .ps-next {
                                    height: 100%;
                                    width: 40px;
                                    background: rgba(255, 255, 255, 1.0);
                                    border: 0px solid #777;
                                    padding: 40px 8px 0px 0px;
                                    top: 0px;
                                    z-index: 98;//20201207
                                    .ps-nextIcon {
                                        width: 25px;
                                        height: 25px;
                                        border: solid rgba(0, 0, 0, 0.5);
                                        border-width: 0 3px 3px 0;
                                        display: inline-block;
                                        transform: rotate(-45deg);
                                        -webkit-transform: rotate(-45deg);
                                    }
                                }
                            }
                            .ps-current {
                                ul > li img {
                                    width: 100%;
                                    height: 360px;
                                    object-fit: cover;
                                }
                                .ps-prev {
                                    width: 43px;
                                    height: 88px;
                                    background: rgba(255, 255, 255, 0.5);
                                    border: 0px solid #777;
                                    padding: 30px 0px 0px 5px;
                                    .ps-prevIcon {
                                        width: 30px;
                                        height: 30px;
                                        border: solid rgba(0, 0, 0, 0.7);
                                        border-width: 0 3px 3px 0;
                                        display: inline-block;
                                        transform: rotate(135deg);
                                        -webkit-transform: rotate(135deg);
                                    }
                                }
                                .ps-next {
                                    width: 43px;
                                    height: 88px;
                                    background: rgba(255, 255, 255, 0.5);
                                    border: 0px solid #777;
                                    padding: 30px 5px 0px 0px;
                                    .ps-nextIcon {
                                        width: 30px;
                                        height: 30px;
                                        border: solid rgba(0, 0, 0, 0.7);
                                        border-width: 0 3px 3px 0;
                                        display: inline-block;
                                        transform: rotate(-45deg);
                                        -webkit-transform: rotate(-45deg);
                                    }
                                }
                            }
                        }
                    }
                }
                .text-box {
                    width: 590px;//20201103
                    margin-left: 90px;
                    margin-top: 30px;
                    margin-bottom: 71px;
                }
                ul.tag-list {
                    font-size: 14px;
                    //.clearfix;
                    margin-top: 20px;
                    letter-spacing: 10px;
                    width: 590px;//20201103
                    margin-left: 90px;
                    & > li {
                        display: inline-block;
                        height: 26px;
                        padding: 0 12px;
                        line-height: 26px;
                        border-radius: 13px;
                        background-color: #F0F0F0;
                        cursor: pointer;
                        //.fl;
                        letter-spacing: 0;
                        margin-top: 10px;
                        a {
                            color: #a8a8a8;
                        }
                    }
                }
            }
        }
    </style>
    <script src="/web/lib/less.min.js"></script>
    <script>
        $(function () {
            var timer = setInterval(function () {
                try{
                    if(returnCitySN){
                        clearInterval(timer);
                        $.ajax({
                            url:ports.articleClickCount,
                            data:{
                                articleId:$('#main-content').data('articleId'),
                                ip:returnCitySN.cip
                            },
                            //设置跨域为true
                            crossDomain:true,
                            // 允许携带证书
                            xhrFields: {
                                withCredentials: true
                            },
                            success:function (res) {
                            }
                        })
                    }
                }catch (err){
                    if(err.toString().search('returnCitySN is not defined')==-1)
                        console.log(err)
                }
            },100)
        })
    </script>
</head>
<body>
<div class="container">
    <#include "/web/html/header/header.ftl"/>
    <div id="simple-view-close" title="退出沉浸阅读" onclick="closeSimpleView()">
        <i class="iconfont icon-guanbi"></i>
    </div>
    <div id="main">
        <div class="position">
            <a href="${domain}/web/home.html" target="_blank">首页</a>
        </div>
        <div id="share-menu-wrap">
            <style type="text/less">
                @import "/web/public/public.less";
                #fragment-article-share-menu{
                    width: 57px;

                    .menu-list{
                        &>li{
                            width: 100%;
                            height: 62px;
                            line-height: 60px;
                            text-align: center;
                            background-color: #fafafa;
                            cursor: pointer;
                            transition: .5s;
                            position: relative;
                            margin-left: 0;

                            .cover{
                                visibility: hidden;
                                width: 100%;
                                height: 40px;
                                position: absolute;
                                left: 0;
                                top: 50%;
                                margin-top: -20px;
                                color: #ffffff;
                                line-height: 20px;
                            }
                            &:hover{
                                &.weibo{
                                    background-color: #E71F19;
                                }
                                &.weixin{
                                    background-color: #1EC354;
                                }
                                &.qzone{
                                    background-color: #ffc136;
                                }
                                &.comment{
                                    background-color: #e71f19;
                                }
                                &.collect{
                                    background-color: #FF8C01;
                                }
                                &.like{
                                    background-color: #e60012;
                                }
                                &.simple-view{
                                    background-color: #3C75F6;
                                }
                                .cover{
                                    visibility: visible;
                                }
                                .iconfont{
                                    color: #ffffff;
                                    /*&.icon-weibo{
                                        color: #e71f19;
                                    }
                                    &.icon-pengyouquan{
                                        color: #65f064;
                                    }
                                    &.icon-kongjian{
                                        color: #ffc136;
                                    }*/
                                    &.icon-pinglun{
                                        display: none;
                                    }
                                    &.icon-shoucang{
                                        display: none;
                                    }
                                    &.icon-shoucang1{
                                        display: none;
                                    }
                                    &.icon-wenben1{
                                        display: none;
                                    }
                                }
                            }

                            &+li{
                                border-top: 1px solid #f0f0f0;

                            }

                            &:nth-of-type(3n+4){
                                margin-top: 16px;
                                border-top: none;
                            }
                            &.collect.active{
                                .iconfont{
                                    color: #FF8C01;
                                }
                            }
                            &.like.active{
                                .iconfont{
                                    color: #e60012;
                                }
                            }
                            .iconfont{
                                font-size: 30px;
                                color: #989898;
                                transition: .5s;
                            }
                        }
                    }
                }
            </style>
            <script src="/web/lib/less.min.js"></script>
            <div id="fragment-article-share-menu" data-article-id="${id}">
                <ul class="menu-list">
                    <li class="weibo">
                        <i class="iconfont icon-weibo" onclick="utils.shareToWeibo()"></i>
                    </li>
                    <li class="weixin" onclick="utils.shareWeixin()">
                        <i class="iconfont icon-pengyouquan"></i>
                    </li>
                    <li class="qzone">
                        <i class="iconfont icon-kongjian" onclick="utils.shareToQzone()"></i>
                    </li>

                    <li class="collect">
                        <div class="cover">
                            收藏 <br> <span>0</span>
                        </div>
                        <i class="iconfont icon-shoucang"></i>
                    </li>
                    <li class="like">
                        <div class="cover">
                            点赞 <br> <span>0</span>
                        </div>
                        <i class="iconfont icon-shoucang1"></i>
                    </li>

                </ul>
            </div>
            <script>
                function scollToComment() {
                    document.getElementById('fragment-comment').scrollIntoView({behavior: "smooth"});
                }
                function simpleRead() {
                    $('body').addClass('simple-view');
                }
                $(function () {
                    var articleId = $('#fragment-article-share-menu').data('articleId');
                    var $btnCommentLi = $('#fragment-article-share-menu .menu-list>li.comment');
                    var $btnCollectionLi = $('#fragment-article-share-menu .menu-list>li.collect');
                    var $btnLikeLi = $('#fragment-article-share-menu .menu-list>li.like');
                    var isCollect = false;
                    var isLike = false;

                    $.ajax({
                        url:ports.articleLikeNums,
                        data:{
                            articleId:articleId
                        },
                        success:function (res) {
                            console.log('查询文章收藏点赞数量',res);
                            if(res.status==200){
                                $btnCommentLi.find('span').text(res.data.commentCount);
                                $btnCollectionLi.find('span').text(res.data.collectionCount);
                                $btnLikeLi.find('span').text(res.data.likeCount);
                                isCollect = res.data.collection;
                                isLike = res.data.like;

                                if(isCollect){
                                    $btnCollectionLi.addClass('active');
                                }
                                if(isLike){
                                    $btnLikeLi.addClass('active');
                                }

                                $btnCollectionLi.click(function () {
                                    if(!isCollect){
                                        $.ajax({
                                            url:ports.articleCollect,
                                            data:{
                                                articleId:articleId
                                            },
                                            success:function (res1) {
                                                console.log('收藏文章',res1);
                                                if(res1.status==200){
                                                    $btnCollectionLi.addClass('active');
                                                    $btnCollectionLi.find('span').text(res1.data.collectionCount);
                                                    isCollect = true;
                                                }
                                            }
                                        })
                                    }else {
                                        $.ajax({
                                            url:ports.cancelArticleCollect,
                                            data:{
                                                articleId:articleId
                                            },
                                            success:function (res1) {
                                                console.log('取消收藏文章',res1);
                                                if(res1.status==200){
                                                    $btnCollectionLi.removeClass('active');
                                                    $btnCollectionLi.find('span').text(res1.data.collectionCount);
                                                    isCollect = false;
                                                }
                                            }
                                        })
                                    }

                                });
                                $btnLikeLi.click(function () {

                                    if(!isLike){
                                        $.ajax({
                                            url:ports.articleLike,
                                            data:{
                                                articleId:articleId
                                            },
                                            success:function (res1) {
                                                console.log('点赞文章',res1);
                                                if(res1.status==200){
                                                    $btnLikeLi.addClass('active');
                                                    $btnLikeLi.find('span').text(res1.data.likeCount);
                                                    isLike = true;
                                                }
                                            }
                                        })
                                    }else {
                                        $.ajax({
                                            url:ports.cancelArticleLike,
                                            data:{
                                                articleId:articleId
                                            },
                                            success:function (res1) {
                                                console.log('取消点赞文章',res1);
                                                if(res1.status==200){
                                                    $btnLikeLi.removeClass('active');
                                                    $btnLikeLi.find('span').text(res1.data.likeCount);
                                                    isLike = false;
                                                }
                                            }
                                        })
                                    }
                                });
                            }
                        }
                    })
                })

            </script>
        </div>
        <section id="main-content" data-article-id="${id}" data-article-img="${articleShareImage}">
            <h3>${articleTitle}</h3>
            <div class="source">
                <span class="website">${articleSource}</span>
                <span class="author"><#if articleAuthorList??><#list articleAuthorList as articlePromoter>${articlePromoter.name} </#list></#if></span>
                <span class="date">${updateTime?string('yyyy-MM-dd HH:mm:ss')}</span>
            </div>
            <hr>
            <div class="content-wrap">
                <div class="swiper-box">
                    <div class="swiper-box-banner">
                        <ul class="pgwSlideshow">
                            <#list articleImageList as articleImage>
                                <li>
                                    <a href="" target="_blank">
                                        <img src="${articleImage.imageUrl}" alt="${articleImage.imageAlt}" title="${articleImage.imageAlt}"/>
                                    </a>
                                </li>
                            </#list>
                        </ul>
                    </div>
                </div>
                <div class="text-box">
                    <#list articleImageList as articleImage>
                        <div name="id_text_box" hidden>${articleImage.imageInfo}</div>
                    </#list>
                </div>
                <#if articleKeywordList??>
                    <ul class="tag-list">
                        <#list articleKeywordList as articleKeyword>
                            <li>
                                <a href="${"${domain}/web/tagList/1.html?tag=${articleKeyword.keyword}"}" target="_blank" class="tag">${articleKeyword.keyword}</a>
                            </li>
                        </#list>
                    </ul>
                </#if>
            </div>
        </section>
        <aside class="right-area">
            <#if articlePromoterStatus == 1>
                <#include "/web/html/fragment/promoter/character-card.ftl"/>
            </#if>
        </aside>
    </div>
    <#include "/web/html/footer/footer.ftl"/>
</div>
</body>
</html>
